<template>
  <div id="tab-container">
    <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
<!--      <el-tab-pane label="用户管理" name="first">用户管理内容</el-tab-pane>-->
<!--      <el-tab-pane label="配置管理" name="second">配置管理内容</el-tab-pane>-->
<!--      <el-tab-pane label="角色管理" name="third">角色管理内容</el-tab-pane>-->
      <el-tab-pane v-for="(oursideItem, oursideIndex) in allMusic" :key="oursideItem.key" :label="oursideItem.name" :name="oursideItem.key">
        <div class="panel hotsongs on">
          <ul class="list">
            <router-link tag="li" :to="{name: 'SongPlayerIndex', params: {songId: item.id}}" class="song url" v-for="(item,index) in oursideItem.data" :key="index">
              <div class="poster">
                <img :src="item.imgUrl" :alt="item.songName">
              </div>
              <div class="info">
                <div class="name">{{ item.songName }}</div>
                <div class="author">{{ item.singerName }}</div>
              </div>
            </router-link>
          </ul>
          <div class="more-songs url">查看该榜单&gt;</div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: "HomeTab",
    data() {
      return {
        activeName: 'recommendMusic'
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    mounted() {
      // this.activeName = this.allMusic[0].key;
    },
    props: {
      allMusic: {
        type: Array,
        default: function () {
          let allMusic = [];
          allMusic.push({
            key: 'recommendMusic',
            name: '今日推荐',
            data: []
          });
          allMusic.push({
            key: 'hotMusic',
            name: '热门推荐',
            data: []
          });
          allMusic.push({
            key: 'rockMusic',
            name: '摇滚歌曲',
            data: []
          });
          allMusic.push({
            key: 'oldMusic',
            name: '经典歌曲',
            data: []
          });
          return allMusic
        }
      }
    }
  }
</script>

<style scoped>
  #tab-container{
    background-color: #fff;
    padding: 20px;
  }

  /*.tabs {*/
  /*  padding: 10px;*/
  /*  background: #fff;*/
  /*}*/
  /*.musictop {*/
  /*  background: #fff;*/
  /*  padding: 10px;*/
  /*}*/

  .panel {
    border-top: 1px solid #eee;
    position: relative;
    top: -1px;
    display: block;
    background: #fff;
  }

  .list {
    padding-top: 0;
    height: 430px;
  }

  .panel .list li {
    height: 60px;
    border-bottom: 1px solid #eee;
    padding-left: 0;
    display: flex;
    padding-top: 10px;
  }

  .panel .list li .poster {
    position: relative;
    width: 45px;
    margin-right: 8px;
  }

  .panel .list li .poster img {
    border: 1px solid #eee;
  }
  .info {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .info .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    color: #333;
  }

  .info .author {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #999;
    margin-top: 2px;
  }

  .more-songs {
    color: #999;
    margin-top: 9px;
    font-size: 12px;
    text-align: center;
    height: 32px;
    line-height: 32px;
  }
</style>
